<template>
  <div class="container">
    <h1>
      <span>持续建设服务计划</span>
    </h1>
    <div class="content">
      <div class="l_side">
        <h1 style="border:0;" id="1">1.持续建设与更新</h1>
        <p>地层三维建模仿真实验始终以解决基于图纸的实验地质构造研判抽象、不直观、难重复的现实难题为宗旨，积极吸收国内外断层识读、三维可视化技术、虚拟现实技术等方面的研究和创新成果，进一步优化实验教学体系，不断更新实验教学内容，提高实验教学层次和教学水平。</p>
        <h1 style="border:0;" id="2">2.面向高校的教学推广应用计划</h1>
        <p>加强校内、校际间合作，扩大示范辐射作用。地层三维建模虚拟仿真实验以解决本校地质学、地质工程、资源勘查工程三个专业基于图纸的实验地质构造研判抽象、不直观、难重复的现实难题为出发点，将逐步实现共享，实现应用，在今后5年中将进一步扩大与其他高校的广泛交流与合作，推广应用，扩大资源共享范围，建立开源、开放的虚拟仿真实验教学机制。</p>

        <h1 style="border:0;" id="3">3.面向社会的推广与持续服务计划</h1>
        <p>跟踪国际前沿技术发展，促进科研成果向实验教学的进一步转化。 地层三维建模虚拟仿真实验依托建设多年的长安大学地学研究教育部虚拟现实实验室，既有多款虚拟现实制作及配套工具软件，还有多年结合科研项目开发的系统，更有大量的工程空间数据和系统应用开发积累，为“地层三维建模虚拟仿真实验”顺利开展、推进创造了物质条件和软件经验前提。因此未来5年有能力多学科交叉视野下国际性科研和教研成果流通、优势资源共享，及时更新虚拟仿真实验中的工具库和资料库， 保证学生在夯实基础知识和实践技能的技术上，把学生培养为具备多学科交叉，具有国际视野的优秀人才。</p>
      </div>
      <div class="r_side" id="r_side" >
        <div class="side_top">
          <div class="side-bar">
            <em class="circle start"></em>
            <em class="circle end"></em>
          </div>
          <div class="catalog-scroller">
            <dl class="catalog-list">
              <dt class="catalog-title level1">
                <em class="pointer"></em>
                <a href="#1" class="title-link">
                  <span class="text">
                    <span class="title-index">1</span>
                    <span class="title-link" title="持续建设与更新">持续建设与更新</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level2">
                <em class="pointer"></em>
                <a href="#2" class="title-link">
                  <span class="text">
                    <span class="title-index">2</span>
                    <span class="title-link" title="面向高校的教学推广应用计划">面向高校的教学...</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level3">
                <em class="pointer"></em>
                <a href="#3" class="title-link">
                  <span class="text">
                    <span class="title-index">3</span>
                    <span class="title-link" title="面向社会的推广与持续服务计划">面向社会的推广...</span>
                  </span>
                </a>
              </dt>
            </dl>
          </div>
        </div>
        <div class="bottom-wrap">
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  margin: 10px 0 95px;
  box-sizing: border-box;
  h1 {
    height: 48px;
    width: 1123px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    margin: 0 auto 30px;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .content {
    width: 1123px;
    margin: 0 auto;
    padding: 35px 40px 80px;
    background: #fff;
    box-shadow: 0 0 10px #ddd;
    min-height: 550px;
    display: flex;
    justify-content: space-between;
    .l_side {
      width: 790px;
      h1 {
        width: 100%;
        font-size: 16px;
        color: #333333;
        margin: 15px 0 20px;
        text-align: center;
      }
      p {
        line-height: 30px;
        color: #666;
        font-size: 12px;
        margin-bottom: 10px;
        text-indent: 2em;
      }
    }
    .r_side {
      width: 180px;
      height: 400px;
      margin-top: 100px;
      position: relative;
      .side_top {
        display: flex;
        justify-content: space-between;
        .side-bar {
          height: 105px;
          border-left: 2px solid #eaeaea;
          width: 5%;
          position: relative;
          .circle {
            display: block;
            width: 10px;
            height: 10px;
            border: 2px solid #eaeaea;
            border-radius: 50%;
          }
          .start {
            position: absolute;
            top: -8px;
            left: -6px;
          }
          .end {
            position: absolute;
            bottom: -8px;
            left: -6px;
          }
        }
        .catalog-scroller {
          // width: 95%;
          background-color: #d7d7d5;
          .catalog-list {
            width: 100%;
            margin: 10px 0;
            position: relative;
            .catalog-title {
              position: absolute;
              left: -160px;
            }
            .level2 {
              top: 30px;
            }
            .level3 {
              top: 60px;
            }
            .title-link {
              font-size: 14px;
              color: #555;
              font-weight: 700;
            }
            .title-index {
              color: #999;
              font-weight: 700;
              font-family: Arial;
              font-size: 14px;
              padding-right: 5px;
            }
            .pointer {
              display: block;
              width: 10px;
              height: 10px;
              background-color: #eaeaea;
              border: 2px solid #fff;
              border-radius: 50%;
              position: absolute;
              left: -24px;
              top: 8px;
            }
            .catalog-title:hover a {
              background-color: #eaeaea;
              border-bottom: 1px solid #ccc;
            }
            .catalog-title:hover .pointer {
              background-color: #409eff;
            }
          }
        }
      }
      .bottom-wrap {
        width: 45px;
        height: 45px;
        border-radius: 3px;
        background-color: #eaeaea;
        text-align: center;
        position: absolute;
        left: -2px;
        top: 125px;
        .el-icon-arrow-up {
          color: #fff;
          font-size: 36px;
          line-height: 45px;
        }
      }
    }
  }
}
</style>


